<template>
	<div class="flex flex-row justify-center">
		<div class="max-w-3xl py-4">
			<div class="px-8 py-20">
				<div>
					<div class="text-center font-mono font-black text-7xl gradient-text">All-Tools</div>
					<div class="text-center font-serif text-3xl py-10 text-gray-400">多款在线工具免费使用</div>
				</div>
			</div>
			<div class="px-4 pb-8 text-center">
				<el-select
					v-model="searchParam.title"
					filterable
					remote
					reserve-keyword
					remote-show-suffix
					:suffix-transition="false"
					:suffix-icon="Search"
					placeholder="输入关键词搜索，如文本、json、图片等"
					:remote-method="searchTools"
					:loading="loading"
					class="max-w-3xl"
					size="large"
					fit-input-width>
				<el-option
				  v-for="item in searchOptions.data"
				  :key="item.id"
				  :label="item.title + ' - ' + item.desc"
				  :value="item.id"
				  @click="optionClick(item.url)"
				/>
				</el-select>
			</div>
			<div class="flex flex-col justify-center px-5">
				<el-divider content-position="center" class="text-center">
					<div class="flex items-center">
						<el-text size="large">热门工具</el-text>
						<el-image src="/images/logo/heat.png" class="w-6"></el-image>
					</div>
				</el-divider>
				<el-row :gutter="20">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-for="tool in hotTools.data" class="mb-6">
						<router-link :to="'tools' + tool.url">
							<div class="tool-card hover:shadow-md hover:-translate-y-2 duration-300">
								<div>
									<div style="float: left;margin-right: 10px;">
										<el-image class="tool-logo" :src="tool.logo"></el-image>
									</div>
									<div>
										<el-text tag="p" class="tool-title" style="display: block">{{tool.title}}</el-text>
										<el-text>{{tool.cate}}</el-text>
									</div>
								</div>
								<el-divider style="margin: 10px 0;" />
								<el-text line-clamp="2">{{tool.desc}}</el-text>
							</div>
						</router-link>
					</el-col>
				</el-row>
			</div>
			<div class="flex justify-center "><router-link to="/tools"><div class="hover:scale-110 duration-300">查看更多</div></router-link></div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { useToolsStore } from '@/store/tools'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
//store
const toolsStore = useToolsStore()
//查询参数
const searchParam = reactive({
  cateId: 0,
  title: '',
  route: '',
})
const searchOptions = reactive({data:[]})
//热门工具
const hotTools = reactive({data:[]})

//搜索工具
const searchTools = async (query) => {
  loading.value = true
  if (query) {
    searchParam.title = query
    searchOptions.data = await toolsStore.getToolInfos(searchParam)
	searchParam.title = ''
  } else {
    searchOptions.data = []
  }
  loading.value = false
}
//搜索跳转
const optionClick = (url) => {
  searchOptions.data = []
  router.push('/tools' + url)
}

onMounted(()=>{
	hotTools.data = toolsStore.toolList.slice(0, 6);
})
</script>

<style>
.gradient-text {
  background: -webkit-linear-gradient(315deg, #0583ff 25%, #00ff00); /* 渐变颜色 */
  -webkit-background-clip: text; /* 文字剪切背景 */
  -webkit-text-fill-color: transparent; /* 填充颜色透明 */
}
/* 工具卡片 */
.tool-logo{
	width: 40px;
	height: 40px;
}
.tool-title{
	font-weight: 600;
	font-size: 1.125rem;
	color: black;
}
.tool-card{
	height: 100%;
	border: 1px solid var(--color-border);
	padding: 10px 20px;
	border-radius: 10px;
}
.tool-cate{
	padding: 10px 10px;
	.tool-cate-title{
		font-size: 1.5rem;
		font-weight: 800;
	}
}
</style>